Unknown behaviour
Unanswered
Cory's Shearwater posted this in #help-forum
Cory's ShearwaterOP
I have this code
so
case1: using this
case2: using this
what is the diff in using case1 or case2 on client side and
what is the diff in using case1 or case2 on SSR.
'use client'
import './home-page.css';
import React from 'react';
import Latex from 'react-latex-next';
import 'katex/dist/katex.min.css';
function App() {
return (
<main className='wrapper'>
<h1>Latex example</h1>
<div className='reveal'>
<h2>Latex already present</h2>
<div>
<Latex>{'\\(\\sqrt{x^2+1}\\)'}</Latex>
</div>
</div>
</main>
);
}
export default App;so
case1: using this
const Latex = React.lazy(() => import('react-latex-next'));case2: using this
import Latex from 'react-latex-next'what is the diff in using case1 or case2 on client side and
what is the diff in using case1 or case2 on SSR.
4 Replies
react.lazy is similar in both the server and client boundaries
In general react lazy importing is so you can reduce the total client bundle by importing components as they are rendered. So you give it suspense to show a loading state while the component gets rendered
https://react.dev/reference/react/lazy
In general react lazy importing is so you can reduce the total client bundle by importing components as they are rendered. So you give it suspense to show a loading state while the component gets rendered
https://react.dev/reference/react/lazy
@Cory's Shearwater
@Cory's Shearwater fixed?
@Cory's Shearwater It's about lazy loading. In next.js you can use
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic
dynamic/nexthttps://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic