[web] Integrate Next.js with MUI v5 #58
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JeGwan
reviewed
Mar 5, 2022
Comment on lines
+19
to
+21
| "@emotion/cache": "^11.7.1", | ||
| "@emotion/react": "^11.8.0", | ||
| "@emotion/server": "^11.4.0", |
There was a problem hiding this comment.
@jordan-choi 님 @emotion/cache랑 @emotion/server는 무슨 역할이에요?
There was a problem hiding this comment.
@emotion/server의 경우,<head>안에 critical CSS를 넣기 위해서 사용합니다.@emotion/server의createEmotionServer메서드로 커스텀 서버를 만들고 criticalCSS를 추출한 후(extractCriticalToChunks)<style>태그로 만들어 initialProps에 포함시킵니다.- 모든 SSR 요청마다 같은 emotion 캐시를 공유하기 위해,
CacheProvider에서 (default 캐시가 아닌) custom cache를 제공하는데요. 이 때 공유할 custom cache를 만들 때@emotion/cache의createCache메서드를 사용합니다. - custom cache를 사용하려는 이유는 developer defined <style> 태그를 사용하기 위해서 입니다 (참고: Primary use cases of createCache).
- 위의 사항에 대해서는 이 이슈에서 자세히 다루고 있습니다.
There was a problem hiding this comment.
@emotion/server는 js로 다뤄지는 css는 런타임에서 인라인으로 스타일을 공급하는데. 그렇게 하면 초기 렌더링시 레이아웃에 영향을 미치는 중요한(아마도 이게 critical css) 스타일들은 js페칭이 될 때까지 적용이 안될테니. 그걸 ssr 에서 head에 넣기 위해 제공되나 보군요.
cache는 왜 필요한지 아직 몰라서 써봐야 알겠네요. 자세한 답변감사합니다~!
56aiden90
approved these changes
Mar 12, 2022
JeGwan
approved these changes
Mar 12, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related issues
Resolves #57
Description
Next.js + MUI v5 + TypeScript Example
Test