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
, which is executed through a.next/static/chunks/pages/users.js
<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?