SSR for `index.html` #4816

alexreardon · 2020-06-29T08:02:46Z

alexreardon
Jun 29, 2020

Hi there!

I am currently using parcel@2.0.0-beta.1 for building a small web app. The index.html file is fairly straightforward:

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script src="./entry.tsx"></script>
  </body>
</html>

Then inside of entry.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(<App />, document.getElementById('root'));

When building for production, I would like to be able to server side render the application. So the new html file would be would be:

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root">{result of ReactDOMServer.renderToString() goes here}</div>
    <script src="./entry.tsx"></script>
  </body>
</html>

Now doing a hydrate

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.hydrate(<App />, document.getElementById('root'));

I am exploring a few different ways to do this. Rather than going all over the place I wanted to get your thoughts on what you think the best approach to this is with Parcel

mischnic · 2020-07-02T14:54:56Z

mischnic
Jul 2, 2020
Collaborator

This might be possible with an optimizer plugin that somehow calls ReactDOMServer.renderToString(....) and injects it into the html bundle. (Or a packager)

1 reply

alexreardon Jul 6, 2020
Author

How could I go about that on my own? I'm thinking for now I could use a seperate entry point for parcel, and the entry point would already have the html rendered into it (so a seperate thing would do reactdom.render. A challenge is that when doing that reactdom.render there are import paths (such as to svgs and css) that node does not understand by default. So I might need to use the parcel bundler to do the reactdom.render

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR for `index.html` #4816

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

SSR for index.html #4816

alexreardon Jun 29, 2020

Replies: 1 comment · 1 reply

mischnic Jul 2, 2020 Collaborator

alexreardon Jul 6, 2020 Author

SSR for `index.html` #4816

alexreardon
Jun 29, 2020

Replies: 1 comment 1 reply

mischnic
Jul 2, 2020
Collaborator

alexreardon Jul 6, 2020
Author