Consider this Next.js component using the Script component:
import Script from 'next/script';
export default function MyComponent() {
return (
<>
Content
);
}What is the behavior of the script loading?
Think about when 'lazyOnload' scripts run in relation to page load events.
The 'lazyOnload' strategy delays loading the script until after the main page load and browser idle time, so it does not block rendering.
Which option correctly uses the Next.js Script component to add an inline script that logs 'Hello'?
Remember how Next.js handles inline scripts safely.
Next.js requires an id and dangerouslySetInnerHTML prop to add inline scripts safely.
Given this component:
import Script from 'next/script';
export default function Page() {
return (
<>
Hello
);
}When running, a hydration mismatch warning appears. What is the likely cause?
Consider what happens if a script changes the page before React finishes loading.
Scripts loaded with 'beforeInteractive' run before React hydration. If they change the DOM, React's expected structure differs, causing mismatch warnings.