Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Pattern for SSR without match, render order with translate and misunderstanding of wait property

See original GitHub issue

I think I have problems to get the SSR work without the match function from react-router (because its not provided in v4 anymore).

For my understanding I am on a good way, but I have some problems with the translate() wrapper, the wait property. It seems, that the translate() wrapper will always prevent the possibility for doing the SSR correct.

My sample code (pseudo code):

<App />

This is my main Component. The I18nextProvider will get the client-side i18n or the server side i18n (when doing ssr).

class App {
	componentDidMount() {
		console.log('App mounted');
	}
	render() {
		return (
			<I18nextProvider store={this.props.i18n || i18n}>
				<MyComponent />
			</I18nextProvider>
		);
	}
}

Client I18n

Here the i18n instance will be returned for client. I will init it with the resourcedata of the SSR process so the namespace does not to have loaded ASYNC and is directly ready.

import i18n from 'i18next';
i18n.use(XHR).init({});
i18n.addResourceBundle('en', 'translation', initI18nRessources.en.translation);
export i18n;

<MyComponent />

MyComponent is the component which has something to translate.

class MyComponent {
	render() {
		console.log('render mycomponent');
		return (<h1>{this.props.t('helloWorld')}</h1>);
	}
}

module.exports = translate()(MyComponent);

SSR server.js

Here we do the SSR. The Server has a global i18n instance which has all ressources loaded sync ready and will provide its data for the server-side rendering. This workd perfect - all the components get rendered correctly on Server.

	...
	App = renderToString(<App i18n={serverI18n} />);
	res.send(
		<head>
			<script>
				initI18nRessources=serverI18n.store.data
			</script>
		</head>
		<html>
		    <div id="react-root">App</div>
		</html>
	);
	...

This is my code (just the important parts of it)

As you can see in <App /> and <MyComponent /> I have console.logs. This is because I saw smth which will cause big problems in my App logic. When I wrap <MyComponent /> with translate it will render after <App /> get mounted. If I remove the wrap the Component will render correctly before App get rendered. This will break some fetchData logic I have implemented in my App and also seems to be a bit weird. I dont know if this is an error or not.

Without any params for translate() I will get a Markup error because on client the namespace seems not to be ready. When I am doing this: translate(null, { wait: false })(MyComponent) I will also get the Markup error. When doing wait to true I will not get a Markup error. But <MyComponent /> will still render after <App /> got mounted.

Just for testing I set the wait var in the init process for react.wait to true and removed the translate params back to nothing but then the Markup error appears again. So it seems that the react.wait parameter does not affect the translate method in my case.

–

My goal now is (and also the question): How to get it work that I can init the i18next-instance on client so the namespace will be available immediately (for myunderstanding it should work with addRessourceBundle but it seems not) and how to solve that the translate wrap will not prevent the component for rendering (when the namespace is still available) so it does not loose its order logic of mounted and rendered.

I hope you can understand my problem. Maybe there is no solution yet - and if not I will try to do my own wrap method which will provide for me what I need.

If there is still a good solution for my problem it would be also nice to add a “How to solve SSR with react-router v4”-example in the documentation.

Thanks in advance

Issue Analytics

State:
Created 6 years ago
Comments:25 (15 by maintainers)

Top GitHub Comments

1reaction

TimoRuettencommented, Jun 28, 2017

Take a look at this: https://stackoverflow.com/questions/40199151/cant-set-state-in-componentwillmount

But as I say its fixable in my example because before setState we can check if ready is still true. If its true we wont do the setState. This should do it.

1reaction

TimoRuettencommented, Jun 26, 2017

Thanks for your response.

Yes - there is always a solution 😃 I will work tomorrow at a solution for react-router v4 for my case. As now I think its not possible so I would have to fork your project and to modify smth or I have to write a new wrapper. Its late here so I will continue tomorrow but of course if I’ll find a good solution I will let you know

Top Results From Across the Web

React Server Side Rendering With Node And Express

This very rough categorization provides us with a starting point, from which to apply development and design patterns.

Server-Side Rendering (SSR) - Vue.js

Server-rendered markup doesn't need to wait until all JavaScript has been downloaded and executed to be displayed, so your user will see a...

Server-side rendering (SSR) with Angular Universal

This guide describes Angular Universal, a technology that renders Angular applications on the server. A normal Angular application executes in the browser, ...

NextJS / React SSR: 21 Universal Data Fetching Patterns ...

Why is there no simple way to universal data fetching in NextJS? ... wait until the promise resolves, and then re-render the component....

Unreal Engine 5.1 Release Notes

(Experimental) You can now convert Landscapes to be rendered using Nanite. ... within the hierarchy and render order is preserved based on the...