What causes a statically generated page to appear without any style when transmitted to the client?

After setting up the Next.js official boilerplate with npx create-next-app and opening it in the browser, I observed that the static HTML document lacks styling:

https://i.stack.imgur.com/mna6K.png

I am concerned about potential FOUC issues. How can I ensure that the page is styled when delivered to the client, similar to how it appears on Next.js' official website:

https://i.stack.imgur.com/GlU0E.png

Just to clarify, I have only generated a new project using npx create-next-app without any code modifications. My setup includes Next.js v12.0.7 and React v17.0.2.

javascriptreactjsnext.js

Answer №1

In order to achieve a response similar to that of Next.js' website, it is necessary to inline critical CSS. This feature is currently in the experimental stage in 

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f39d968b87b3c2c1ddc3ddc4">[email protected]</a>
(and not documented). To activate it, you must modify your next.config.js:

module.exports = {
  experimental: { optimizeCss: true }
}

To make this work, you need to install critters (yarn add -D critters or npm i -D critters). Additionally, ensure that you are running the production build (next build && next start) and not a development build as depicted in the image you shared.

Outcome:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting AngularJS: Diagnosing Issues with My Watch Functionality

I need to set up a watch on a variable in order to trigger a rest service call whenever its value changes and update the count. Below is the code snippet I have: function myController($scope, $http) { $scope.abc = abcValueFromOutsideOfMyController; ...

javascriptangularjs

Can one manipulate SVG programmatically?

Looking to develop a unique conveyor belt animation that shifts items on the conveyer as you scroll down, then reverses when scrolling up. I discovered an example that's close to what I need, but instead of moving automatically, it should be triggered ...

javascriptjqueryhtmlsvg

Ways to verify if an array contains two identical object values?

I am in search of a way to determine whether my array contains duplicate object values or not. Let's say I have the following array of objects: const array = [ { id: "id1", quantity: 3, variation: "red", ...

javascript

Updating the ContextKey of the DynamicPopulateExtender based on the selected value from a DropDownList dynamically

I am facing an issue with my DynamicPopulateExtender control. I need it to render HTML based on the value of an asp:DropDownList. The problem lies in writing the JavaScript code that can fetch the dropdown value, assign it to the DynamicPopulate control&ap ...

javascriptasp.netajaxvb.netajaxcontroltoolkit

What is the purpose of the Express 4 namespace parameter?

Having worked extensively with Express 4, I recently attempted to implement a namespaced route with a parameter. This would involve routes like: /:username/shows /:username/shows/:showname/episodes I figured this scenario was ideal for express namespacin ...

javascriptnode.jsexpress

Troubleshooting the Issue of Angular Model Not Refreshing in Angular.js

Running into an issue with my directive where the model isn't updating as expected. Here's a snippet of my HTML code: <div class="text-area-container"> <textarea ng-model="chatText" ng-keyup="updateCount(chatText)">< ...

javascriptangularjs

"Looking to display an image object retrieved from AWS S3 using a signed URL in Vue.js? Here's how you

<div v-for="(data, key) in imgURL" :key="key"> <img :src= "getLink(data)" /> </div> imgURL here is an array that contains file names. methods: { async getLink(url){ let response = await PostsService.downloadURL({ i ...

javascriptamazon-s3vue.jsvuejs2base64

Grunt is throwing an error message of "Cannot GET/", and unfortunately ModRewrite is not functioning properly

I've recently started using Grunt (just began last Friday). Whenever I run Grunt Serve, it displays a page with the message "cannot GET/" on it. I tried implementing the ModRewrite fix but the error persists. Any assistance would be highly appreciat ...

javascriptnpmgruntjsconnect-modrewrite

I'm puzzled as to why my Vuex modules are not functioning properly. I keep receiving the error message: "[vuex]

I've been searching for hours and can't figure out why I keep getting this error message: [vuex] unknown mutation type: groceryStore/getStoreApple on all of the commits to the mutations in the groceryStore-module. I believe I'm following the ...

javascriptvue.jsvuexvuex-modules

Unable to retrieve scope data in controller function

Having trouble accessing the scope attribute fullName from the controller method login. What could be causing this issue? App.controller('LoginController', ['$scope', 'LoginService', '$location', function(scope, Log ...

javascriptangularjsangularjs-scope

When PHP echo of json_encode triggers an error, AJAX status 200 will be raised

Despite everything running smoothly in the program below, an AJAX error is triggered: javascript: var data = { email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="026f6742656f636b6e2c616d6f">[email protect ...

javascriptphpjsonajax

Cycle through images that are dynamically generated from retrieved data

Although I have a functional solution for this issue, it feels messy and not the ideal way to handle it in Vue. The challenge is fetching data from a backend related to a "Vendor" entity, which includes photos that need to be displayed on the page. The go ...

javascriptvue.js

Screening data entries

.js "rpsCommonWord": [ { "addressWeightPct": "60", "charSubstituteWeightPct": "15", "nameWeightPct": "40", "oIdNumber": "21", "shortWordMinLthWeightPct": "100", "substituteWeightPct": "5", ...

javascriptangularjs

JavaScript vanilla can be difficult to grasp, especially when it comes to

I'm experiencing a delay in displaying and hiding the mobile menu and table of contents section on my website when viewed on a mobile device. I'm using vanilla JavaScript to add and remove classes, but it's taking about one second for the me ...

javascript

Exploring the variations in method declarations within Vue.js

Today, while working with Vue, I came across an interesting observation. When initially using Vue, there were two common ways to define a method: methods: { foo: () => { //perform some action } } and methods: { foo() { / ...

javascriptfunctionvue.jsscope

Measuring the variable size of an array containing objects of a given class

Recently, I created a basic code/userscript to receive notifications about any changes on a specific website: function notifier(){ setTimeout(function () { location.reload(true); },60000) } function notiCounter() { console.log("Cou ...

javascriptarraysgetelementsbyclassname

Display JSON data using Vue.js

Trying to display JSON file results using Vue.js, with the goal of showing the result in a value. Here is the code snippet: data () { return { fetchData: function () { var self = this; self.$http.get("/api/casetotalactivation", functio ...

javascriptjsonvue.js

"Incorporate multiple data entries into a table with the help of Jquery

How can I store multiple values in a table row using jQuery or JavaScript when the values come from a database via Ajax? <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th ...

javascriptjqueryajaxlaravel

Currently using Mongoose and Luxon to showcase the event date, however, I am encountering an issue where the displayed date is one day earlier than expected

Currently, I am working with Mongoose and Luxon to present a date chosen by the user from a form. However, there seems to be an issue where the date is being console logged as one day, but appearing on the page as the previous day. Below is my model setup ...

javascriptmongodbexpressmongooseluxon

How can I append a hash to a URL using JavaScript without causing the page to scroll?

Is it possible to add a hash to the URL without scrolling the page using JavaScript? I navigate to the page I scroll down I click on a link that adds a hash (for example: http://www.example.com/#test) The page should not scroll back to the top. What is ...

javascripturlhashscroll