B
B
Breezy
Search…
Server-Side Rendering
Superglue does not include server-side rendering out of the box, but you can easily add it with humid.
Follow the instructions. Then create a app/javascript/packs/server_rendering.js:
1
import React from 'react';
2
import { ApplicationBase } from '@thoughtbot/superglue'
3
import SeatsIndex from 'views/seats/index'
4
import ReactDOMServer from 'react-dom/server';
5
require("source-map-support").install({
6
retrieveSourceMap: filename => {
7
console.log('--------------------hello')
8
return {
9
url: filename,
10
map: readSourceMap(filename)
11
};
12
}
13
});
14
15
// Mapping between your props template to Component, you must add to this
16
// to register any new page level component you create. If you are using the
17
// scaffold, it will auto append the identifers for you.
18
//
19
// e.g {'posts/new': PostNew}
20
const identifierToComponentMapping = {
21
'seats/index': SeatsIndex,
22
'seats/show': SeatsIndex,
23
};
24
25
export default class Application extends ApplicationBase {
26
mapping() {
27
return identifierToComponentMapping;
28
}
29
30
visitAndRemote(navRef, store) {
31
return {visit: () => {}, remote: () => {}}
32
}
33
}
34
35
setHumidRenderer((json) => {
36
const initialState = JSON.parse(json)
37
return ReactDOMServer.renderToString(
38
<Application
39
// baseUrl={origin}
40
// The global var SUPERGLUE_INITIAL_PAGE_STATE is set by your erb
41
// template, e.g., index.html.erb
42
initialPage={initialState}
43
// The initial path of the page, e.g., /foobar
44
// path={path}
45
/>
46
)
47
})
Copied!
Modify your webpack config
1
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
2
const environment = require('./environment')
3
const path = require('path')
4
const ConfigObject = require('@rails/webpacker/package/config_types/config_object')
5
6
const webConfig = environment.toWebpackConfig()
7
const ssrConfig = new ConfigObject(webConfig.toObject())
8
9
ssrConfig.delete('entry')
10
ssrConfig.merge({
11
entry: {
12
server_rendering: webConfig.entry.server_rendering
13
},
14
resolve: {
15
alias: {
16
'html-dom-parser': path.resolve(__dirname, '../../node_modules/html-dom-parser/lib/server/html-to-dom')
17
}
18
}
19
})
20
21
delete webConfig.entry.server_rendering
22
23
module.exports = [ssrConfig, webConfig]
Copied!
Replace <div id="app"> in your ERB templates with:
1
<% initial_state = controller.render_to_string(@virtual_path ,formats: [:json], locals: local_assigns, layout: true) %>
2
3
<script type="text/javascript">
4
window.SUPERGLUE_INITIAL_PAGE_STATE=<%= initial_state.html_safe %>;
5
</script>
6
7
<div id="app">
8
<%= Humid.render(initial_state).html_safe %>
9
</div>
Copied!
In application.js change this:
1
import { render } from 'react-dom'
Copied!
to this
1
import { hydrate } from 'react-dom'
Copied!
and change the rest of application.js accordingly.
Last modified 16d ago
Copy link