Crater v3 is live! Much speed, awesome design too

Go check out the newest version of Crater.

I also wrote a bit in the announcement thread about why it is so fast now.

7 Likes

Great work! This is really much faster than before.

1 Like

Yeah it faster then before. But what’s the logic making React SSR contribute to speed? Isn’t that need server to render html? Client side rendering should be faster because it only need browser to render html

SSR is almost always used specifically to make the page load faster.

Here’s the flow with SSR:

  1. Load HTML
  2. Display HTML

Without SSR:

  1. Load minimal HTML
  2. Load JavaScript
  3. Run JavaScript
  4. Fetch initial data
  5. Render HTML
  6. Display HTML

I don’t think that’s 100% accurate, but you get the point.

3 Likes

So, a few things here, that you are combining…

  1. React is making it faster. WAY faster.

  2. SSR is helping with initial page load because the html is already built for your browser and then DDP kicks in and grabs updates.

  3. If you aren’t logged in, I am actually caching the pages for 30 minutes and serving straight from the file system, which is a huge speed gain too.

The real downside of all this is that Blaze is still being shipped with packages like accounts-twitter, so the overall JS bundle is at like 4mb right now :scream:

3 Likes

I suppose that @sacha can speak to any changes he might have made regarding the backend, I know the schema stayed 100% the same as I was running both versions side by side for about a week of beta testing using the same prod db.

To add some more precision, the SSR flow in a Meteor app looks something like this:

  1. Load HTML rendered on the server, including Fast-Rendered data.
  2. Display HTML
  3. Load app bundle
  4. Load & display Fast-Rendered data
  5. Load & display DDP data

This means that you need to make sure that the initial HTML, the fast-rendered data, and the DDP data all match, otherwise you get weird bugs. And you also have to be careful with things like dates, cookies, etc. that might be different on client and server.

And Telescope’s back-end hasn’t changed much. I did refactor a lot of the code, but it’s still basically doing the same things.

4 Likes

If you want to see an example of DDP kicking in after a fast rendered page is served up, just log out and open a new browser window and hit Crater.io. You will be served a cached page from Nginx, then DDP will kick in and update the page.

From glancing the release note, I can tell that it must have been a lot of work. Appreciate it @joshowens.

1 Like

Thanks, but a lot of the heavy lifting was on @sacha’s end :smiley:

I did some testing, tweaking, server setup, etc.

2 Likes