rrv4-ssr-and-code-splitting

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #machine-learning #linux #nodejs #java #awesome #cli #awesome-list #pytorch #security #mcp

rrv4-ssr-and-code-splitting

(★ 132)

Blog Post Here - https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70

파일 탐색기

최종 버전 다운로드 (.zip)

- base.css
- index.css
- active-todos.jsx
- all-todos.jsx
- app.jsx
- completed-todos.jsx
- entry.jsx
- enums.js
- footer.jsx
- routes.js
- rrv4Helpers.jsx
- todoItem.jsx
- todoList.jsx
- utils.js
.babelrc
.eslintrc
.gitignore
async-highlight.png
index.html
package.json
README.md
server.js
webpack.config.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Code Splitting + SSR with RRv4 demo

This is a demo repository set up to demo code splitting by route on React Router v4 with server rendered React components.

Running the demo:

```
git clone git@github.com:gdborton/rrv4-ssr-and-code-splitting.git
cd rrv4-ssr-and-code-splitting/
npm install
npm start
open http://localhost:3000
```

## What's async loaded?

The list of todos that exists between the input bar and the footer of stack of todos. If you open your network tab before navigating between All/Active/Completed, you'll notice requests for `0.index.bundle.js`, `1.index.bundle.js`, and `2.index.bundle.js` respectively.

![async-component](https://raw.githubusercontent.com/gdborton/rrv4-ssr-and-code-splitting/master/async-highlight.png)

## Things of note:
 - The contents of this repo were based on the [TodoMVC code](https://github.com/tastejs/todomvc/tree/master/examples/react) originally written by [Pete Hunt](https://github.com/petehunt).
 - We're using babel-eslint to enable `import()`.
 - We're using the Airbnb dynamic import plugins, webpack's `import()` creates references to `window` that don't work in node:
   - [babel-plugin-dynamic-import-webpack](https://github.com/airbnb/babel-plugin-dynamic-import-webpack) for client side code.
   - [babel-plugin-dynamic-import-node](https://github.com/airbnb/babel-plugin-dynamic-import-node) for server side code.
 - We have two webpack configs:
   - One for server (`libraryTarget = commonjs2` and `babel-plugin-dynamic-import-node`).
   - Another for client (`babel-plugin-dynamic-import-webpack`).
 - The server, starts with some static data, **and is never updated**, you'll lose your changes if you reload the page.

rrv4-ssr-and-code-splitting

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

rrv4-ssr-and-code-splitting

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README