Optimizing Nginx for caching server-side rendered (SSR) web pages developed using React and Next.js

After creating an application where some pages are rendered on the server side, I noticed that something wasn't right. When viewing the requested pages in my browser, everything seemed normal. However, when I sent a CURL request to the page and saved the response to a file named mypage.htm, upon opening the file, the page did not render as expected.

The main reason for choosing server-side rendering was to cache responses in a frontier layer like Nginx or Varnish.

I am curious to know if Next.js truly provides fully server-side rendered pages, or if it's just pretending to play its role like a Hollywood star saying, "Hey, I render things on the server side," even though things are not actually being rendered on the server side. Did I overlook something in the details?

Answer №1

Next.js provides support for 3 different methods:

  1. Server-Side Rendering (SSR) - utilizing getInitialProps
  2. Static Site Generation (SSG) - generating a static page during BUILD time with getStaticProps
  3. Static Site Re-Generation - creating a static page at BUILD time and updating it when the data changes by defining both getStaticProps and adding the revalidate field

For further details, refer to this link

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

The functionality of PHP in relation to the jQuery post feature seems to be malfunction

After developing the JavaScript functionality for this contact form, below is the HTML structure without any CSS styling included: <!-- Contact Form --> <div class="cws-widget"> <div class="widget-title" style="color:#fec20b;">S ...

a hyperlink not functioning properly after the # symbol

I’ve been attempting to obtain the URL in order to share it on Google Plus. I’ve experimented with different codes, but the issue is that the ID value is concealed within the URL, making it impossible to directly pass the link in the "a href" tag. The ...

Error: Unable to access property 'camera' as it is undefined

After implementing the Raycaster from Three js to detect collision following a MouseMove event, I encountered an error: Cannot read properties of undefined (reading 'camera') Here is the code snippet causing the issue: bindIFrameMousemove(if ...

AngularJS error: Uncaught MinError Object

Recently, I started a new AngularJS project and successfully set it up. The installation of angular and angular-resource using bower went smoothly. However, upon installing another service that I have used previously - https://github.com/Fundoo-Solutions/a ...

Developing a progress bar with jQuery and Cascading Style Sheets (

Below is the code I'm currently using: <progress id="amount" value="0" max="100"></progress> Here is the JavaScript snippet I have implemented: <script> for (var i = 0; i < 240; i++) { setTimeout(function () { // this repre ...

Slideshow elements removed

I attempted to remove my links individually from the div id="wrapper", but unfortunately have encountered an issue while doing so: window.onload = function () { setInterval(function () { var wrapper = document.getElementById("wrapper"); var my_l ...

The request body for MERN full stack development is returning empty

I am currently facing an issue while trying to establish a connection between my client and the backend. Here is the snippet of code I am using: //client const body = { email: value, }; axios.get("http://localhost:5000/checkEmail", body) // ...

Using jQuery, remove any white spaces in a textbox that are copied and pasted

There is a textbox for entering order IDs, consisting of 7 digits. Often, when copying and pasting from an email, extra white spaces are unintentionally included leading to validation errors. I am looking for a jQuery script to be implemented in my Layout ...

The error message "AWS Lambda Node 18: fetch is not defined, please resolve or include global fetch" indicates that

Seeking assistance with calling the Pagespeed Insights API from an AWS Lambda using Node 18. Struggling to make fetch() function properly. Cloudwatch logs indicate the message "inside the try about to fetch," but then nothing else appears. The Lambda con ...

Accessing properties in JSON data with AngularJS

I am experiencing issues with accessing a JSON object returned from an $http call in my AngularJS app. I have provided the code snippet below, but it seems that nothing is being rendered on the HTML. Can anyone please assist me in identifying what I might ...

How do I ensure my object is fully constructed before sending it in the response using NodeJS Express?

Currently, I am in the process of constructing a result_arr made up of location objects to be sent as a response. However, my dilemma lies in figuring out how to send the response only after the entire array has been fully constructed. As it stands, the re ...

Is it possible to determine if jQuery find returns true or false?

Snippet of HTML Code <div class="container1"> <div class="box1">Box 1</div> <div class="box2">Box 2</div> <div class="box3">Box 3</div> </div> <div clas ...

Javascript: Dynamically Altering Images and Text

One feature on my website is a translation script. However, I'm struggling to activate it and update the image and text based on the selected language. This is the code snippet I am currently using: <div class="btn-group"> <button type ...

At what point does IE7 recalculate styles? It seems to have difficulty functioning consistently when a class is applied to the body

Currently facing a peculiar issue. I'm utilizing a class on the element as a toggle switch to control various layout behaviors on my website. When the class is active, specific actions occur; when it's inactive, these actions do not take place. ...

Integrating an external JavaScript library into the codebase

I created a web radio player using Vue Cli and now I need to incorporate a new feature with an external library, specifically designed for handling audio advertisements. The catch is that this library must be loaded from a remote server and cannot be simpl ...

Obtaining a JWT token from local storage in a server-side component

Once the user has logged in, the API response contains a JWT token which I save in the local storage. Now, how can I access this token from the server component to make API requests? I am using Next.js 14. I am currently storing the token in a context but ...

Personalizing a Doughnut Graph

Currently in the process of creating a donut chart I am looking to achieve a design similar to the image below, where the values are displayed within the colored segments import DonutChart from 'react-d3-donut'; let data = [{ count ...

Post request in Axios + React (Next.js) does not maintain the context or state

After scratching my head for hours, I am still unable to understand this perplexing bug. Just like in a previously solved issue found here, the react context and state seem to disappear once the request is completed. Despite having all functions bound, th ...

Using a function as a prop in Vue js to retrieve data from an API

I am facing an issue with a component that I want to decouple from the data fetching implementation. My goal is to be able to pass a data fetching callback as a prop. The reason for this is so that I can easily mock the data fetching process in storybook. ...

ways to animate the closing of a dropdown menu

I'm currently working on a navbar dropdown animation code that works on hover. However, I've encountered an issue when trying to use it on a phone - I can open the dropdown, but I can't seem to close it. Does anyone have suggestions on how ...