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

Utilizing external JavaScript scripts within Next.js

For my upcoming project, I am looking to incorporate some external JavaScript files into the script. Here is an example: <script src="assets/js/productFactory.js"></script> I came across a suggestion to use Next/Head, however, this goes again ...

Display a JSON object on a web browser

I am trying to display a JSON object on a web browser using HTML. The object is already in a text file and has been properly formatted for readability. My goal is to maintain the same formatting when displaying it on the browser. ...

Sending a parameter to a different function (on a separate webpage)

At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

I am currently utilizing the UI-Router ng2 and attempting to change routes after a certain function is triggered. My code snippet looks like this: SomeFunction() { if(condition){ router.navigate(['/newRouteName']); } } It's ...

What is the method for adding data to a table without utilizing an ID field?

Here is the code I have written: This table contains details of the candidates: <table id="candidates-table" class="table table-striped table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Candidate Picture ...

Experiencing difficulties with NPM installation

Screenshot of my terminal in VSCode Despite attempting to uninstall and reinstall node and clearing the cache, I am still unable to resolve this issue. Any suggestions? If it's relevant, I am using Windows 10. ...

Struggling to display a navigation menu on angular 1 with complex nested json structure

I have set up a navigation bar using JSON data fetched by an Angular service. Everything is working fine with my service and controller, but I am facing difficulty in displaying the nested JSON data in my view. Here is the JSON data: { "menu": [ ...

The error message "node-soap - callback is not a function" is indicating that there

Encountering a common TypeScript error while calling a SOAP method on a node-soap client in NodeJS. Seeking guidance on resolving this issue. https://www.npmjs.com/package/soap - version: 0.35.0 Sample Code Snippet const [result] = await mySoapClient.Per ...

Is there a way to include various reactions at once?

I've been searching everywhere for solutions but I'm stuck on this issue. Here's the scenario I'm dealing with: I need my bot to execute a command that will send an embed to a specific channel accessible only by admins. Done. Fol ...

The installation of @grpc/grpc-js does not include all necessary dependencies

Recently, I incorporated @grpc/grpc-js into my project using the command npm i @grpc/grpc-js. Surprisingly, there are no compile time errors when I attempt to use it. However, at runtime, a series of errors arise: ./node_modules/.pnpm/@<a href="/cdn-cgi ...

Error encountered: Mocha - The property '$scope' cannot be read as it is undefined

I encountered an issue: Error: Type Error - Cannot read property '$scope' of undefined at $controller (angular/angular.js:10327:28) at angular-mocks/angular-mocks.js:2221:12 at Context. (src/client/app/peer-review/post-visit.co ...

Troubleshooting Problem with Angular JS Page Loading on Internet Explorer 9

My angularjs single page application is encountering issues specifically in IE9, despite functioning perfectly in Chrome and Firefox. The initial load involves downloading a substantial amount of data and managing numerous dependencies through requireJS. ...

Issue with rendering in React Router

I've been having trouble with React Router in my code. I know that there have been changes from Switch to Routes in React Router Dom v6, but even after making the adjustment, my program just displays a blank screen. Can anyone help me resolve this iss ...

Exploring intricate designs using HTML and Javascript

After extensive experience with both WPF and HTML5 JavaScript, one thing that stands out to me is the clear organization provided by XAML's defined panels. Grid, StackPanel, DockPanel, WrapPanel, and others offer a straightforward way to achieve consi ...

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...

What is the best way to convert an ajax get request into a post request using jQuery?

I'm interested in transforming a GET request to a POST request: $.ajax({ url: '/items?ids=' + value.join(','), method: 'get', dataType: 'json' }) What changes do I need to make to turn this into a ...

How can Node / Javascript import various modules depending on the intended platform?

Is there a way to specify which modules my app should import based on the target platform in TypeScript? I am interested in importing different implementations of the same interface for a browser and for Node.js. In C++, we have something like: #ifdef wi ...

Identifying the camera model using getMediaStream

Are there methods available to determine if a user's device has a front, rear, or dual cameras installed? For instance, laptops typically only have a front-facing camera while some devices may have both. I am looking for a way to identify the type of ...

Analyzing the contents of a JSON file and matching them with POST details in order to retrieve

When comparing an HTTP Post body in node.js to a JSON file, I am looking for a match and want the details from the JSON file. I've experimented with different functions but I'm unsure if my JSON file is not formatted correctly for my needs or if ...

Discovering the worth of specific selections in a dropdown menu

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <select name="states" id="states"> <option value="100">Hawaii</option> <option value="107">Texa ...