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.
Serverside rendering / client rehydration does not work after there has been a redirect on the server.
See original GitHub issueServerside rendering / client rehydration does not work after there has been a redirect on the server.
Version
2.1.2
(not using babel-plugin-tyled-components)
Reproduction
I will try to explain this as well as I can, sorry if I am a bit vauge. It is non-trivial to provide a reproduction.
Using react-router I have a protected route, which requires the user to be logged in. If the user is not logged in, it gets reidrected to the login page. After logging in and navigating back to the protected route (so it hits the server), the wrong styles get applied. The only reason that I can see for this happening is that styled-components somehow caches the styles the first time the route is rendered and therefor reuses the wrong styles the second time. I have no idea if you are doing something like this though, it’s just a guess.
My styled-components related code on the server looks like this;
...
const component = (
<Provider store={store}>
<RouterContext {...props}/>
</Provider>
)
const sheet = new ServerStyleSheet()
const styles = sheet.collectStyles(component)
const content = renderToString(styles)
const css = sheet.getStyleTags()
const html = renderToString(<Html store={store} content={content} css={css}/>)
res.status(200).send(`<!doctype html>${html}`)
...
Steps to reproduce
- Access the hidden route on the server (by URL) when you are not logged in
- Application redirects you to the login screen (this happens on the server)
- Login
- Access the hidden (now accessible) route on the server (by URL)
Expected Behavior
The same styles gets applied on both the server and on the client
Actual Behavior
The client and server has different styles for the same route
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@GGAlanSmithee yes, different classes do hint at the Babel plugin’s ssr feature being needed 😬
@philpl
I followed your advise and added
babel-plugin-styled-componentsand it seems like it did the trick! At least I haven’t been able reproduce the behavior yet.For any future googler;
Thanks for the quick and accurate help. 👍