The document discusses different technologies for building JavaScript applications including React, Next.js, and TRPC. It describes React components for an app including a Jumbotron and posts. It explains Next.js features like client-side rendering, server-side rendering, static site generation, and incremental static regeneration. TRPC is mentioned for building APIs.

1. Babel Coder
JS TECH STACK

2. Babel Coder

3. Babel Coder
project
package.json
{
"name": "project-name",
"scripts": {},
"dependencies": {
"lodash": "^16.13.1"
},
"devDependencies": {
"dotenv": "^16.13.1"
}
}
node_modules
lodash
dotenv

4. Babel Coder
.pnpm Store
project
package.json
node_modules
lodash
dotenv
Hard link
pnpm add lodash
pnpm add -D dotenv
pnpm remove loads

5. Babel Coder

6. Babel Coder
REACT
App
Jumbotron
Header PostList
PostItem
PostItem PostItem

7. Babel Coder
REACT
App
Jumbotron
Header PostList
PostItem
PostItem PostItem

8. Babel Coder
REACT

9. Babel Coder
NEXT.JS
project
package.json
pages
blog.tsx
/blog
CSR
SSR
SSG
ISR

10. Babel Coder
CLIENT-SIDE RENDERING
API

11. Babel Coder
SERVER-SIDE RENDERING
API
/articles/ts-5
/api/articles/ts-5

12. Babel Coder
STATIC-SITE GENERATION
/articles/ts-5
js.html
ts-5.html

13. Babel Coder
INCREMENTAL STATIC REGENERATION
/blog
blog.html
regenerate

14. Babel Coder
DEFAULT BEHAVIOR
CSR
SSG

15. Babel Coder
TRPC
/articles/ts-5
/api/articles/ts-5