Same styles are applied twice when Server-Side Rendering #22
Comments
|
Yeah that's a great point. I think I have an idea for this. Instead of adding expensive checks with the DOM, we could have an API like this: import register from 'styled-jsx/register'
const elements = Array.from(document.querySelector('style.styledJSX'))
for (const el of elements) {
register(el.getAttribute('data-jsx-id'), el)
} |
|
We could also expose and manipulate |
|
@rauchg / @nkzawa here's an idea: What if we just save the ids via global object: rehydrate.js
import flush from 'styled-jsx/flush'
return function rehydrate(ids = 'jsx_style') {
if (typeof window === 'undefined') return
const styles = flush()
window[ids] = Object.keys(styles)
}Then on the the _JSXStyle injector, we just check for that global variable if its set, it means we check the id against the window.jsx_style variable. |
|
How about to perform automatic detection of server rendered DOMs, which I think is similar to how import React from 'react'
import { flushToString } from 'styled-jsx/server'
import App from './app'
function handler (req, res) {
const app = React.renderToString(<App />)
const styles = flushToString()
const html = `<!doctype html>
<html>
<head>${styles}</head>
<body>
<div id="root">${app}</div>
</body>
</html>`
res.end(html)
}
<style data-jsx-id="12345">p[data-jsx="12345"] { color: red }</style>
<style data-jsx-id="98765">p[data-jsx="98765"] { background-color: blue }</style>Then we can automatically collect these DOMs. I think this less flexibility is good because we want to force users to create each |
|
@thisguychris Both ways would work fine anyway. About your idea, |
|
@nkzawa yeah the idea is adding / attaching all generated ids inside a global variable. We then add a check the existence of the variable inside When you say
Does that mean we're going to have some DOM traversals to collect these ids from the generated styles? If so attaching an array of ids inside a window variable would be faster and simpler? Thoughts? |
|
@thisguychris
yep, ids and elements
I can't fully imagine how it works. To achieve this, we have to force users to write some JS on client ? Additionally, we need to get |
|
@nkzawa if we have the ids, we can add a check inside |
* 'text/css' is not required (https://www.h3xed.com/web-development/is-type-text-css-needed-for-style-and-link-tags) * add high-level server rendering APIs to avoid duplicates (#22) * verify existing server-rendered DOM to avoid duplicate styles * expose `styled-jsx/server` * add server rendering tests * yarn * avoid checking the DOM unnecessarily after removing a style * README style fix * fix linting
It seems we have to skip generating style tags on client if it's already rendered on SSR.
The text was updated successfully, but these errors were encountered: