Is NextJS rendering solely on the server, or is it capable of rendering on both

Within my users.js JSX file, I have an exported component that looks like this:

... return <MainContainer keywords="users"> export default Users

  • During the process of SSR/SSG, the browser displays the users HTML (comprising of <li> tags) as expected
  • In addition to the HTML, the browser also retrieves a lower-level representation of the React component in the form of
    .next/static/chunks/pages/users.js
    , which is executed through a <script> tag in the HTML.

Possible Explanation: The js file may be intended for client-side rendering of the users dataset into HTML content, given its structure containing references such as

_components_MainContainer__WEBPACK_IMPORTED_MODULE_3 ...  react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__["jsxDEV"])("li", ....

It seems that both the server and the client-side js code can generate <li> elements. This leads me to question if the browser receives and processes **both** the initial HTML and then again runs the JS to create more HTML - which seems redundant considering I am utilizing getStaticProps in my users.js file.

If the assumption regarding the purpose of the compiled React js file fetched via <script> in NextJS is incorrect, it raises the query as to **why** NextJS includes this script tag import in the first place?

Answer №1

Next.js is commonly utilized for rendering react apps on the server side. While frameworks like angular and vue.js are typically client-side, there are methods to execute them on the server, with Next.js being a key solution for running react applications in this manner. With features such as server rendering of React Apps, automatic code splitting, lazy loading, built-in CSS support, and hot reloading support, Next.js simplifies the development process for React projects.

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

Key within square brackets in a JSON array

I am dealing with a JSON array that includes a square bracket in the key, like this: { "msg":"OK", "data":[ { "nls!type":"NCR", "current":"Assign", "physicalid":"0FFE0001000009FC5BD6805C00001352", "attribute[custTitle]":"Tit ...

Is there a way to remove text from a div when the div width is reduced to 0?

Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...

Implement Material UI Textfield with 'error' and 'helper text' for items within a repeated loop

I am currently working on developing an application that involves dynamic text field input using MUI textfield. This application consists of two fields - From and To. The functionality includes generating two new fields when the user clicks on the "Add New ...

Reactfire encounters import error in Next.js/React application leading to failure

For my Next root layout, I am surrounding the children with the necessary Reactfire providers: import './globals.css'; import { AuthProvider, FirebaseAppProvider } from 'reactfire'; import { auth, firebaseConfig } from '../config/f ...

Exploring ReactJS: Utilizing the useEffect Hook for Retrieving Various Data Sources

I have recently started working with react and currently have a function that fetches data in my useEffect hook. I am using a loading state to handle component rendering, and then populating my state component with the fetched data successfully. However, ...

Leveraging javascript to invoke a controller function within the MVC framework

My objective is to make a table row act as a link to redirect users to another view on my MVC website. Instead of using the conventional "Details" link generated by the table list, I want the entire row to serve as the link to the "Details" view. In order ...

Consistent navigation within a NextJs application

I'm currently developing a Next.js application and I face the challenge of fetching navigation content from my Prismic API server-side. I want to retrieve the data once and pass it to my Header component to ensure a persistent navigation menu across a ...

Personalized bar graph description using Highcharts

Looking to create a unique stacked Highcharts bar chart with custom text within each bar, but currently only seeing the data number displayed by Highcharts. Check out the fiddle here. Here's the code snippet: $(function () { $('#container& ...

Starting with React.js in Rails 5

I'm currently diving into the world of integrating react.js into my Rails 5 application. After adding the react-rails gem to my project, I utilized the generator to create my initial component with the command: rails generate react:component AppRole ...

Transferring information to the controller and refreshing the interface (Single-page design)

I'm stuck on a personal project and could really use some help. If anyone has any feedback, it would be greatly appreciated. Thanks in advance. In my index.php file, I have a div with the id main-container. Inside this container, there are two separa ...

Challenging glitch in the JavaScript code

My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You ...

Running the Express service and Angular 6 app concurrently

Currently, I am in the process of developing a CRUD application using Angular6 with MSSQL. I have managed to retrieve data from my local database and set up the necessary routes, but I am encountering difficulties when it comes to displaying the data on th ...

IE throws an exception when attempting to use Canvas as it is not supported

One of my challenges involves working with a Canvas Element: <canvas id="canvas" width="300" height="300"> Sorry, your browser does not support the Canvas element </canvas> In my JavaScript file, I have the following code: var ct= docum ...

Getting the dimensions of an image using a path in JavaScript

I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...

Redirecting with response headers in Next.js

Objective: The Goal: Clicking a button on a page should send a request to the controller. The controller will then set a cookie, and upon receiving the response, redirect the page to another page, such as the about page. Directly Calling API route from th ...

Is there a specific minimum height that should be set for the equalHeight function to apply?

Despite trying everything, I can't seem to achieve the dreadful layout my designer has given me without using JavaScript! The issue lies with the positioning of the div #backgr-box, which needs to be absolutely positioned behind the #contenuto ( ...

Guide on navigating an array of objects using the provided keys as a starting point in Javascript/Typescript

Assuming I have an array of objects structured like this: const events: Array<{year: number, month: number, date: number}> = [ {year: 2020, month: 10, date: 13}, {year: 2021: month: 3, date: 12}, {year: 2021: month: 9, date: 6}, {year: 2021: mont ...

Error message: The md-autocomplete function is throwing a TypeError because it cannot read the property 'then' of an undefined object

I am encountering an issue with the md-autocomplete component from angular material. Here is my code snippet: <md-autocomplete required md-search-text="searchTxt" md-selected-item-change="setModelValue(item.name)&q ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

Is it possible to utilize context within a custom hook?

Here is a custom hook that attempts to use context inside it, but results in an error stating "Invalid hook call. Hooks can only be called inside of the body of a function component" export const useFetch = async () => { const { city, setFetchError } = ...