Fore e.g., if I have an app for Pokémon names and someone searches on the web for such apps, if my website is SEO optimized, Google crawlers will send requests to multiple such apps to get back the initial html file which if its is written in Next, will contain the landing page heading (i.e. <h1>Pokémon names app</h1> and hence it will favor my app over others where as if my app is written in react, the crawler wont see the landing page content in the initial html and hence my website might not be shown to users.
Whereas, if its a next server, when we make the initial request for the html file, the next server sees that the html file contains the landing page code where a network call needs to be made. so it makes the required api call and after getting back the data from backend renders the data on server side and sends back the html file as response to client which also contains the pre-rendered component. this is called server side rendering . this component is now also rendered on client side but since it was already pre-rendered , the client rendering time is negligible. Basically whatever is the page.tsx content corresponding to the app route….e.g.…app/, app/users. app/admin, that code will be present in index.html as well which favours SEO due to crawler being able to see necessary data in the html.
Next.js offers file based routing i.e. unlike react-router-dom, we do not need to create specific routing configurations for each route. Instead, the routes are automatically made available to us based on the file structure and hierarchy.
For e.g.., if an app is pokemon.com, and the landing page should be rendered at this route “/”,(default), then the corresponding page.tsx should be present at the root level of “app” folder.
Similarly, for some specific user-data to be rendered at this route (pokemon.com/users), the user-data should be present in a page.tsx at this folder level : app/users.
React has SSR i.e. static site generation which means if we have the final build files of an app i.e. the index.html, the styles.css and the index.js, we can send these 3 files to client and the users can use the app, but in case of a next app, there needs to be a next server constantly running on the server side which enables SSR of components.
Layout.tsx wraps around our page component so if we want to render something all the time irrespective of what gets rendered at different routes, we will define that component in layout, as that will get rendered at all times.
state variables and hooks cannot be in used in SSR components since these are beyond our control and we cannot add interactivity to this…so, to use hooks in a component written in Next we need to make it a CSR component…using “use client”.
NextJs also allows to write backend code….we can create api routes to cater to requests…instead of page.tsx at a certain directory level, file name should be route.ts so that the response can be sent back to the client.