Frontend

• Toolchain

• CSR Framework

Compile

HTML

Javascript

Css

Scss

Css

Typescript

Javascript

Javascript

Javascript

"async" | Can I use... Support tables for HTML5, CSS3, etc

Downgrade, 兼容

Jsx

Javascript

Compile JSX 語法, css in JS (emotion)

Module Bundler

HTML

Javascript

Css

Javascript

Css

Javascript

Source Code (Modules)

Output static file

bundle.js

bundle.css

main.js

Header.jsx

Content.jsx

api.js

UserList.jsx

Loader

main.ts

Header.tsx

Content.tsx

api.ts

UserList.tsx

index.scss

Icon.svg

index.ts

ts-loader

compile to js code

babel-loader

compatible JS code

index.scss

sass-loader

compile to css code

css-loader

handle @import and url()

inject style to document

style-loader

icon.svg

@svgr/webpack

convert to url string

convert to React component

Take a look at Webpack Config

Client Side Rendering

Javascript

Dom tree

Css

API server

Ajax

HTML

High Performance

CSR generates on-demand HTML. It will not refresh or re-render the whole page,

Reusable components

With CSR, we can reuse UI components across multiple pages or routes without having to request the server each time. This enhances usability and on-page performance.

React

Vue

Angular

DATA

component

render

DATA 2

component

render

View

View

component

Including

• HTML structure to be render
• Component behavior (JS)
• Style (Css)

App

Router

Route

Route

Route

Home

User

Setting

Header

Body

Footer