Will it support the appdir of nextjs13?

[RustLoverTheCoder]

Will it support the appdir of nextjs13?

[jaredLunde]

Do you mean add "use client" to the files?

[jasondainter]

@jaredLunde thanks for a great library, best masonry library I have used so far!

I have one (noob) question if I may, I am using NextJS and was running into hydration errors when using Masonic. So I ended up having to use the client using

const [isClient, setIsClient] = useState(false);

and

useEffect(() => { // Once the component is mounted, we know we're on the client setIsClient(true); }, []);

Then conditionally load my board based on this with

{isClient && ( <Board cards={cards} /> )}

This fixed the hydration error, but I have a concern about the knock on effect this would have on SEO. Its critical for me these pages are well optimised and the items in the boards must be search engine readible. GPT told me:

"Search engine crawlers may not be able to properly index your site if the content is not immediately available on the server-side. Google's crawler is capable of executing JavaScript, but it's generally better to have the content available immediately from the server-side for SEO purposes."

Is this correct and is there any alternative way to use Masonic in this way without getting the hydration errors, but also in a way that doesnt kill any SEO juice?

[jaredLunde]

The Masonry component has ssrWidth and ssrHeight props for this use case. Just add an arbitrarily large size and it will fill the area on the server. As the hydration error is concerned, you could use the suppressHydrationWarning prop to silence it. The component always requires the client because it needs the viewer's browser window to calculate the grid.

[jasondainter]

Thanks a lot @jaredLunde appreciate the quick reply.

So my solution above does actually work fine removing the error, my bigger concern was more about search engine readability.

In my cards that show in the grid I have text and sometimes images or video. Its optimal (and somewhat essential) for the product I am building that as a minimum the text is readable by search engines, and a bonus would be to have them also see the meta data for the images/videos also which has some smaller benefit.

I get a bit paranoid about using this client side route. As I understood it nextJs and its server side rendering has a huge SEO benefit as most search engines can read the content, if I change that, wont I kill my SEO?

I need to read about this more, bit new to this!, but any input welcome!

[jasondainter]

Just seen #10 seems to describe this sounds like I am misunderstanding and that it is possible using ssrWidth and ssrHeight to make this google discoverable.

Assuming I did that is my only option to then surpress the warning? I assumed the useEffect route would then invalidate the SSR (eg it was one or the other) but feel free to enlighten me!

[jaredLunde]

To be honest I'm not sure off the top of my head. It's possible you could do something like have two components and swap the "SSR component" for the "client component" using the same useEffect method, but I can't guarantee it. Definitely worth testing.