What you need to know before you dive into Next.js: React, Pre-rendering, CDN and Client-side navigation

Problems of Client Side Rendering

• Poor SEO
• Slow initial page load

Steps in Client-Side Rendering

1. Downloading HTML(user sees loaders and skeleton interfaces)
2. Downloading JavaScript
3. Running JavaScript(rendering react app)
4. Fetching data

• After finishing all the steps, user views the loaded page.

React Framework like Next.js Can Solve

• SEO(Search Engine Optimization)
• Improving performance(especially Largest Contentful Paint)

Steps in Server Rendering(without authorization using cookies)

1. Downloading HTML(Views loaders and skeleton interfaces)
2. Running javascript(mostly cached, faster)
3. Fetching data(mostly cached, faster)

Steps in Server Rendering(with authorization)

1. Downloading HTML(Views loaders and skeleton interfaces)
2. running javascript to generate Dynamic routes(better processors and memories without background processes, faster)
3. Fetching data(close to the data source, faster)

React

React consists of three main packages: react, react-dom, and babel.

• react has the core part of the library.
• react-dom enables you to react use react with the DOM.
• babel compiles jsx syntax so that it can be readable by javascript.

Why React?

• If you create UIs in pure javascript it’d be completely imperative. You’re bound to describe how you do it. Yet, react enables you to create UIs in a declarative way. You only need to focus on what you meant to create instead. There are just fewer details and you’ll write less code.

State in React

• The UI DOM is the blueprint of the UIs.

When does react preserve or reset state?

• React preserves state when the same components are at the same position in the tree. We can reset state by rendering components in different positions or by giving each component a unique key.
• What if we want to retain state instead of resetting it? (chat app)
  • Render all components and hide them using css
  • Lift up state to parent component
  • Store it in localStorage to make it last when the user closes the page
• React resets state when different components are at the same position in the tree.

Single Page Application

• A web app that has only one document and updates its content via javascript APIs.
• Since it doesn’t need to receive extra documents from the server, page loading is fast.

Tips from challenges

• In React DOM, Javascript objects can be children.
• Keys are used as part of the position. If there is a child of the same kind of component and the key changes, react resets state.
• Keys are used to find the correct state matching the child. If the order within the parent changes, react links each state to the right child with keys.
• A component is recreated from scratch if its key changes. React also recreates the DOM elements instead of reusing them.

The environment: development and production

• You’re building and running your application on your local machine during development.
• You’re making your application ready to be deployed and consumed by users and you can say it’s going to production.

There are four steps of production: Compiling, Minifying, Bundling, and code splitting.

• Compiling transforms code in a way that browsers can understand.
• Minifying gets rid of unnecessary information for code to run such as comments, spaces, and indents. This process enhances performance by decreasing file sizes.
• The application consists of a bunch of modules components and functions for better developer experiences. Bundling draws dependency graph and merges them into fewer files. The number of requests for files reduces.
• Code splitting splits a bundle into multiple bundles and loads them when they are actually needed. It reduces initial page loading time.

Code execution phase: build time and run time

• build time: a set of steps toward production
• run time: the time when your application runs to respond to a user’s request

Rendering: client and server

• client: the browser that sends a request to a server
• server: the computer in a data center that takes a user request, processes it, and sends it back to the user as a form of response.

Rendering

• the process of converting React code into HTML.
• When the web application is rendered before it is sent to the browser, it's called pre-rendering. There are two pre-rendering techniques that Next.js introduces: SSR(Server Side Rendering) and SSG(Static Site Generation).
• SSR(Server Side Rendering): The server generates HTML and sends it to the user every time it takes a request.
• SSG(Static Site Generation): The server creates HTML at build time and sends it to the user.(You can update the HTML even after build time.)
• CSR(Client Side Rendering): The browser translates react app into HTML.
• Hydration: the process that makes HTML pages interactive using javascript.

Network

• A set of computers linked to one another that can send and receive data among them.
• CDN: Set computers in multiple locations and the computers store static files. These computers send the cashed result.
• Edge computing: The same as CDN but these computers support code execution.
• These networks can make applications deliver content faster, reduce latency, and more performant.

Client-side navigation

• Client-side navigation is the page transition using javascript.
• The default page transition done by the browser loads the full page from scratch while client-side navigation only modifies the part of the page.
• Therefore, client-side navigation is more efficient than default browser navigation.