What you need to know before you dive into Next.js: React, Pre-rendering, CDN and Client-side navigation
Tags: nextjs, react, beginners
Published: 2023-03-01 12:28:43



## 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](https://beta.reactjs.org/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state)

- 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](https://beta.reactjs.org/learn/preserving-and-resetting-state#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](https://nextjs.org/learn/foundations/how-nextjs-works)

- 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.