Skip to content

Instantly share code, notes, and snippets.

@PaulCampbell
Last active September 5, 2019 14:12
Show Gist options
  • Save PaulCampbell/7a811bdf165b7cf2fc867d96d362401f to your computer and use it in GitHub Desktop.
Save PaulCampbell/7a811bdf165b7cf2fc867d96d362401f to your computer and use it in GitHub Desktop.

Building websites with isomorphic rendering...

Been messing around with that Next.js thing. Some thoughts

Getting Data

If you want to use exactly the same view code for browser and server, the browser must be able to get data the same way as the server does.

This means when rendering on the server, you can't really ask the database for data. You have to call a http end point the same as the client does. This forces you to do all data access through a http API.

Authentication

Let's say you log in and set a session cookie. When your browser requests some data, it passes the cookie, and you can decide what data to send back (if any).

When the server is doing the page rendering, it calls the API endpoint to get the data to put on the page. You no longer have a session cookie on this request. So, if an API request is sent from a server, you need to remember to copy the cookies off of the page request and put them onto your server initiated http request.

Authorisation (Only logged in users can see this page)

Always a bit of a pain in the arse with SPAs, but it needs a little thinking about here... If a page requires authentication to be seen, when the page is rendered in the browser you're going to need to make an API call to get the current user (or their permissions or whatever), to see if they can view that page. Not really sure of what else you can do here. I suppose if a user really wants to see a page that's in the js bundle, they can find a way.

Speed

As far as browsing the thing, it feels damned quick. I think this is possibly because of this prefetching business https://github.com/zeit/next.js/#with-link-1. Whatever it is, it feels mad quick. This is probably countered somewhat by the server request required for "you need authentication" views. Reckon you need something like that in an SPA anyway though.

2 ways to load a page

You write a test, it passes. You browse the site, everything looks good. You get to a page, hit the refresh button... Server error :(

This will hopefully happen less now that I've learned a few of the above lessons, but it's a bit of an arse that "Green UI Test" doesn't neccessarily mean working everywhere. Could be that it only works when browser rendered!

Styled Components

These things seem cool, but I'll be screwed if I can get them working in my tests. It's a bit of a shame tbh.

State management

Given the fact that your pages are probably gonna be a bunch of nested components, you probably do eventually want some kind of state management library. I'm doing fine without it, but I think that may fall down at some point.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment