tanem / react-svg

:art: A React component that injects SVG into the DOM.

Home Page:https://npm.im/react-svg

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

AfterInjection is not executed in SSR rendering?

StringKe opened this issue · comments

I need to perform some additional operations on the SVG document, and SSR rendering does not seem to load the SVG document.

image
image

Thanks for the report @StringKe, I'll try to have a look at this over the weekend.

@StringKe sorry for the delay. Assuming this is still an issue for you, is it possible for you to provide a working repro showing the issue? Or some more context around how you're rendering your app, e.g. with Next.js (note there's an ssr example in this repo).

I suspect the issue will be because this library uses XMLHttpRequest to fetch the SVG, which is probably not available on the server.

@tanem
I implemented a parameter RequestResouce.

When RequestResouce exists, RequestResouce will be used to get SVG Content.

Use XMLHttpRequest if RequestResouce does not exist

In this way, only the RequestResouce parameter needs to be passed in the SSR environment.

RequestResource is global function param in my program

I'm not familiar with RequestResource, is that a polyfill for XMLHttpRequest or another fetch implementation entirely? Do you have some code you can show me related to this?

If XMLHttpRequest is not available, this library won't work. The code it delegates fetching to is here. Are there any errors elsewhere in your app that are related?

In the SSR environment, RequestResource is https://github.com/node-fetch/node-fetch

Thanks. Since that module is for the fetch API, it's not going to help wrt this library, since it needs XMLHttpRequest in order to fetch SVGs. Once your app is loaded in the browser, fetching SVGs should work.

If you're looking for a more compatible solution for your use-case, you might want to look at react-inlinesvg, since it uses fetch to fetch it's SVGs.