Meteor server side rendering is about to become much easier

announce
41

I’m using with react router 4 and it’s working great. I render my normal app component in onPageLoad and pass in the location:

const html = renderToString(sheet.collectStyles(
  <App location={sink.request.url} />
));

And then in my App component I use a StaticRouter when rendering via the server with the location from the sink request.

const Router = (props) => {
  if (Meteor.isClient) {
    return <BrowserRouter {...props} />;
  }
  const context = {};
  return <StaticRouter location={props.location} context={context} {...props} />;
};
1 Like
42

Yes. Galaxy comes with a prerender.io configuration OOTB

43

I’m trying to leverage SSR to display something more meaningful to the users when they first hit the app instead of loading indicator, and then let the rest of app load once the initial html is rendered.

So a simple use case would be:

  1. if it’s a first time user or a signed out user, then display the login form, the login form will be disabled until the client side is initiated

  2. if it’s a returning user, then render page header and let react router initiate and then redirect the user to the home page where the rest of the components will be rendered

However I’m running into some issues:

  1. I’m not sure if there is away to retrieve any information about the user (e.g. user id, the full http request object? some cookie to tell if they’re authenticated?) from the initial request inside the onPageLoad function, it seems to me that the only information I’ve to make a decision on what to render on the server is the path in the url, without any information about the user how can we render anything specific to their state? or am I missing something here?
  2. When the signup form is server rendered and delivered to the user and the user start typing some values in the fields, then the user will lose whatever they typed when the form re-initialize by react at the client
  3. If I attempt to disable the form at the server and enable it at the client, or display a loading then I get the following console warning:
> Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
>  (client) <div data-reactroot="" da
>  (server) <div class="container-flu

Any insights/tips on how to get something like that working? I’m using React Router V3 and Meteor 1.6

@XTA @hwillson @benjamn any input on this folks?

44

Point 2 is true, we also have this issue. All input will be lost after the initial code was loaded and initialized on the client side. The third point could be fixed if you do enable the form within componentDidMount. This function will only be called on the client, so you won’t get a checksum error.

componentDidMount() {
  this.setState({formIsVisible:true});
}

Client and server need to return the same result. So something like this is forbidden:

render() {
  return (Meteor.isClient) ? <div>Client</div> : <div>Server</div>;
}
1 Like
45

Hello, I am using the package and logging sink on the server when a request is received.

I am having this log every 10-15 seconds, on Galaxy, but the number of Connections is 0.

I am wonder if this could be a crawler (I use google analytics) or something else.

Any ideas how to detect if this is a real situation or maybe I have something wrong that causes this requests?

Thanks

8z9yh
2017-09-05 12:58:01-03:00 ServerSink {
8z9yh
2017-09-05 12:58:01-03:00 request:
8z9yh
2017-09-05 12:58:01-03:00 { browser: { name: 'other', major: 0, minor: 0, patch: 0 },
8z9yh
2017-09-05 12:58:01-03:00 url:
8z9yh
2017-09-05 12:58:01-03:00 Url {
8z9yh
2017-09-05 12:58:01-03:00 protocol: null,
8z9yh
2017-09-05 12:58:01-03:00 slashes: null,
8z9yh
2017-09-05 12:58:01-03:00 auth: null,
8z9yh
2017-09-05 12:58:01-03:00 host: null,
8z9yh
2017-09-05 12:58:01-03:00 port: null,
8z9yh
2017-09-05 12:58:01-03:00 hostname: null,
8z9yh
2017-09-05 12:58:01-03:00 hash: null,
8z9yh
2017-09-05 12:58:01-03:00 search: '',
8z9yh
2017-09-05 12:58:01-03:00 query: {},
8z9yh
2017-09-05 12:58:01-03:00 pathname: '/',
8z9yh
2017-09-05 12:58:01-03:00 path: '/',
8z9yh
2017-09-05 12:58:01-03:00 href: '/' } },
8z9yh
2017-09-05 12:58:01-03:00 arch: 'web.browser',
8z9yh
2017-09-05 12:58:01-03:00 head: '',
8z9yh
2017-09-05 12:58:01-03:00 body: '',
8z9yh
2017-09-05 12:58:01-03:00 htmlById: {},
8z9yh
2017-09-05 12:58:01-03:00 maybeMadeChanges: false }
1 Like
47

@benjamn

Could this package be used / updated to push JSON to the client as well?

It looks like it can neatly fill the void left by kadira:fast-render, and would be a nice treat for people that are still in the Blaze camp.

1 Like