Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

Server Side Rendering with React and Redux

Server Side Rendering với React và Redux

Server Side Rendering với React và Redux

Xây dựng ứng dụng React, Redux và React Router sử dụng kỹ thuật Server Side Rendering (SSR), Isomorphic và Universal JS

4.6
(3,880 đánh giá)
27,073 học viên
Giảng viên
Stephen Grider
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
8.0 giờ video
95 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

Bạn sẽ học được gì

Hiểu rõ những thách thức của Server Side Rendering
Xây dựng dự án mẫu cho server side rendering
Sử dụng React, Redux và React Router để tối ưu hóa công cụ tìm kiếm (SEO)
Thành thạo kỹ thuật tải dữ liệu trên server
Thiết kế kiến trúc server có khả năng mở rộng cho ứng dụng lớn

Yêu cầu

Đây không phải khóa học cho người mới bắt đầu. Bạn cần quen thuộc với React, Redux, React Router và Express

Đối tượng phù hợp

Dành cho kỹ sư muốn xây dựng ứng dụng mới với server side rendering
Dành cho kỹ sư muốn hiểu thách thức của Isomorphic Javascript

Nội dung khóa học

12 phần • 93 bài giảng
1 Một vài lưu ý
2 Tài nguyên khóa học
3 Tại sao cần Server Side Rendering?
4 Tổng quan về SSR
1 Tổng quan ứng dụng
2 Cách tiếp cận kiến trúc server
3 File Package.Json mẫu
4 Thiết lập boilerplate
5 Cài đặt Express
6 Hàm RenderToString
7 JSX trên server
8 Webpack phía server
9 Nghỉ giải lao và ôn tập
1 Rebuild và khởi động lại
2 Server Side Rendering, Isomorphic Javascript, Universal Javascript
3 JS phía client
4 Client bundles
5 Thư mục Public
6 Tại sao cần Client.js?
7 Khởi động client
1 Gộp cấu hình Webpack
2 Khởi động bằng script đơn
3 Bỏ qua file với Webpack
4 Helper Renderer
1 Triển khai hỗ trợ React Router
2 BrowserRouter vs StaticRouter
3 Cấu hình Route
4 Lỗi không khớp HTML
5 Thêm về cấu hình Route
6 Cấp độ Routing
1 Users API
2 Bốn thách thức lớn
3 Tạo store trên browser
4 Tạo store trên server
5 Action Creator FetchUsers
6 Reducer Users
7 Import Reducer
8 Component UsersList
9 Babel Polyfill
1 Phát hiện hoàn tất tải dữ liệu
2 Giải pháp #1 cho tải dữ liệu
3 Giải pháp #2 cho tải dữ liệu
4 Thư viện React Router Config
5 Cập nhật cách sử dụng Route
6 Hàm MatchRoutes
7 Hàm LoadData
8 Store Dispatch
9 Chờ hoàn tất tải dữ liệu
10 Nghỉ giải lao và ôn tập
1 Cách tiếp cận Page
2 Tái cấu trúc thành Pages
3 Tái cấu trúc Page Exports
4 Client State Rehydration
5 Thêm về Client State Rehydration
6 Chuyển state sang templates
7 Giảm thiểu tấn công XSS
1 Vấn đề xác thực
2 Xác thực qua Proxy
3 Tại sao không dùng JWT?
4 Thiết lập Proxy
5 Giao tiếp giữa Renderer và API
6 Axios Instances với Redux Thunk
7 Axios Instance phía client
8 Axios Instance phía server
9 Component Header
10 Thêm Component App
11 Xây dựng Header
12 Lấy trạng thái xác thực
13 Gọi FetchCurrentUser
14 Kết nối Header
15 Tùy chỉnh Header
16 Styling Header
1 Trang 404 Not Found
2 Triển khai trang NotFound
3 Context StaticRouter
4 Tính năng Admin
5 Action Creator và Reducer Admins
6 Component Admins Route
7 Kiểm thử Admins Route
8 Lỗi Promise.all
9 Giải pháp xử lý lỗi #1
10 Giải pháp xử lý lỗi #2
11 Giải pháp xử lý lỗi #3
12 Component Require Auth
13 Triển khai Require Auth
14 Sử dụng Require Auth
15 Xử lý Redirects
1 Meta Tags
2 Thiết lập tags với Helmet
3 Thực hành React Helmet
4 Dynamic Title Tags
5 RenderToString vs RenderToNodeStream
1 Bước tiếp theo và kết thúc

Giới thiệu khóa học

Note: This course assumes you've got the basics of React, Redux, and Express down.  Check out my course 'Node with React', its the perfect preparation!

Go beyond the basics of React and Redux!  This course will teach you to combine the ultra-popular React v16, Redux, React Router, and Express technologies to build a server-side-rendered web application.

All of my courses are 'learn-by-doing': no boring endless lectures with Powerpoints, only live, interactive coding examples.  In this course we'll build one application that profiles the challenges of server side rendering with React, Redux, React Router, and Express.  By putting each concept into a real app, you'll get a better idea of when to use each unique and powerful feature.

Ever wonder why there are so few courses online that teach server side rendering techniques?  Sure, there are blog posts that show a tiny portion of a server side rendered app, but there are nearly no resources online to give you the full server side rendering experience from start to finish.  This course is the most complete resource online for learning about exactly why server side rendering is so challenging.  You'll learn the biggest hurdles, along with multiple solutions to each major problem, giving you the toolset you need to tackle server side rendering techniques in your own applications.

Here's what we'll learn:

  • Learn the architectural considerations of building a server side rendered app
  • Connect a Webpack-powered front and and backend app together
  • Communicate data from your server to client using Redux initial state to your React application
  • Secure your application from common XSS attacks caused by state rehydration
  • Understand how to route user requests on the front end with React Router and on the backend with Express
  • Handle errors and redirects properly that occur during the server rendering process
  • Authenticate your users with cookie-based authentication during the server rendering phase
  • Understand why JWT's are not appropriate for use in a server rendered app
  • Enhance authentication flows in your app with Google OAuth authentication

I've built the course that I would have wanted to take when I was learning to build server side rendered apps. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Redux
Hiển thị tất cả khoá học Server Side Rendering
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊