Intro to Next.js to Create Server Side Rendered React.js Apps - Software School (2024-06-13)

In this lecture we learn about Next.js, the "React Framework for the Web".
We first get an overview how pages used to be traditionally fully rendered on the server side until the advent of single-page applications (SPA), when construction of the pages was delegated to the client-side using JavaScript.
We then learn that a hybrid approach was then thought out, to have the benefit of server side rendering (SSR) and single-page applications. That is, you first render the page server side, then send that to the client, which in turn then navigates through the website acting as a single-page application.
We learn how to generate a project using create-next-app. Then we learn about the file structure of the project. We get introduced to File System based routing.
We investigate the problem of Search Engine Optimization (SEO) that SPAs had, showing that when you View Page Source on the client side, there's nothing for the search engine crawler bot to see. Then we compare that to fetching data and rendering on the server side and see that it fixes that issue.
We learn about different strategies of fetching data. Namely, we do client-side first. Then learn about fetching at build time. Then finally we learn how to fetch on demand at every request.
We get to do some debugging and learn that when the data is fetched server-side, it's not so straightforward to debug in the browser Developer Tools (DevTools) client side. You have to leverage the Terminal that is running the Next.js server.
The lecture shows how to fetch data for posts, like from a blog, and showing that on the posts index page. You learn how to style using CSS Modules.
Later you learn how to create a page whose route is dynamic, meaning the postId could change. You learn to access that postId parameter via the context on the server side.
You also get to learn how to define global CSS styles and how the class names are preserved, as opposed to CSS Modules that adds a prefix and suffix to make them unique and prevent class name clashes.
Source Code: github.com/nbktechworld/using...