The document discusses isomorphic rendering in server-side React, highlighting its advantages for user experience and SEO by sending pre-rendered HTML to clients. It explains code splitting, allowing for dynamic loading of JavaScript chunks to improve performance, and the role of Webpack in managing these chunks. The document also contrasts Webpack 1 and 2 and presents solutions to issues of code splitting in isomorphic React applications.

1. Code Splitting with
Server-Side React
By Atif , Gaurav and Saptarshi

2. What is Isomorphic Rendering ?
• Rendering the web app on server and sending the
complete HTML to the client.
• The client creates the HTML in memory(Virtual Dom),
checks if there are changes and re-renders the page on
client.
• Advantages:
•Better UX as user gets the complete page on first hit to the
server.
•Better SEO as the bots can easily index the pages.
1

3. What is Isomorphic Rendering ?
2
Server rendered
HTML
Client rendered
HTML
All users receive the same
page from the server for a
given URI. But if the api
response is different on
client (for example. when a
user is logged in), the page
re-renders to show the
latest data.

4. Code Splitting
• It allows us to split our
code into various
chunks which you can
then load on demand.
• It helps us to reduce the
initial response size
required to render the
page ,
3

5. How code splitting works?
• Splits the code
in multiple
chunks.
• Maintain the
dependency
tree
• Chunk is loaded
at runtime as
jsonp and is
loaded only
once. 4

6. How webpack does code splitting?
• A split point creates a chunk for dependencies.
• Chunk is automatically checked for repetition of
modules and split accordingly.
• A chunk is loaded at runtime as jsonp and is loaded
only once.
• Use Case:
• In paytm.com when you will open /shop/g page then only g page
assets and js will get loaded and if now you click on product then
new new js will get loaded at runtime.
5

7. Problem with code splitting in isomorphic
React ?
• Code splitting should happen only on client side.
There is no need for splitting on server.
• Code splitting needs a special function
‘require.ensure’ which can not be run on server. It is
only understood by webpack, which runs on client.
6

8. Webpack 1 vs Webpack 2 ?
• Webpack 2 has many enhancements over webpack 1:
•The `require.ensure` function which did not have error
handling is now replaced by System.import function which
returns a promise which can be used for handling success and
error scenarios.
•Webpack 2 supports import statements and can analyse these
statements to eliminate dead code (code which has been
imported but not has been used anywhere). This is called Tree
shaking.
•More developer friendly configurations.
7

9. How we solved this with conditional
require.ensure ?
8
new Promise(resolve => {
if (process.env.BROWSER) {
require.ensure(['./Home'], (require) => {
const Home = require('./Home').default;
resolve(Home);
}, 'Home');
} else {
const Home = require('./Home').default;
resolve(Home);
}
}
• We solved this by
requiring different
modules depending
on environment.

10. Thank you!