'#21' - Add Identity-based idempotency support #668
Conversation
| } | ||
|
|
||
| this.unique.set(h.key, h) | ||
| } |
There was a problem hiding this comment.
It is meant to cache the components that use key so that when switching routes it will set the cached component instead of the new one.
Example:
pages/index.js:
<Head>
<link rel="stylesheet" href="/abc.css" key="test" />
</Head>
pages/other.js:
<Head>
<link rel="stylesheet" href="/def.css" key="test" />
</Head>
if you navigate to / first and then to /other using a <Link> it will keep /abc.css instead of /def.css in this case.
There was a problem hiding this comment.
I wonder why we want to do this. I think we should use new one in this case.
There was a problem hiding this comment.
I might be better to remove this indeed. Since it will re-render anyway.
|
@rauchg Can you review this ? |
|
|
@rauchg On the second point: it says here babel-polyfill is needed: We include https://babeljs.io/docs/plugins/transform-runtime/ in next.js. So It should be fine 👍 |
|
Just came across this issue: would it also be possible to use My concern is that in cases where there are a lot of meta tags (think social media directives), this could lead to errors which are difficult to trace / catch (duplicate keys used when they should not etc). There is of course a performance penalty to be paid, not sure how large that is though. |
|
The purpose of the |
|
In other words: the vast majority of users will never specify a |
|
I actually haven't needed this in a while 🤔 Let's hold off on this until we feel the need again |
|
@rauchg this is surely needed by people who use non-css-in-js solution for components styling. const InjectStylesheet = ({ id, value }) => (
<Header>
<style key={id} dangerouslySetInnerHTML={{ __html: value }} />
</Header>
)and in import InjectStyleSheet from 'helpers/next/css'
import { classnames, stylesheet } from './style.css'
const SomeComponent = () => (
<div className={classnames.root}>
<InjectStyleSheet id="someComponent" value={stylesheet} />
some content
</div>
)Obviously, for now this approach ends up with duplicate style tag injection every time the component is being used. |
|
Running into the exact same issue described above by @code4aman. |
|
this would indeed be very useful, especially for managing meta tags |
|
This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread. |
This fixes #21.
Note:
Due to this reverse() https://github.com/zeit/next.js/blob/master/lib/head.js#L24 the last
keyis used instead of the first. I don't know if this is an issue.Usage:
Will only render
<link rel="stylesheet" href="/def.css" key="test" />. When rendering new pages it checks if the key was already set. If so it will not remove the currentkey="test"and discard the newkey="test".keyis used by React for the same kind of functionality. So it seems the best possible prop to use. Though I'm open to changing it toid