I want to integrate i18n within a ReactJS application that renders on client-side only.
I can handle the internationalization itself with one of the several i18n libraries available, however I was wondering which would be the best way/available options to store whatever language the user has chosen cross-request (like refreshing the page).
Is this something I can handle on the client-side only or do I have to do it server-side and then pass it to the client?
Thank you very much in advance.
You have limited options with storing a users preference using client side technology. Essentially, you are limited to storing these preferences in a cookie.
Any other sort of persisted data should be handled by the server and most likely saved to a database somewhere.
Related
I ran into a problem that I have never faced before developing a PWA with translations.
I state that I have always and only developed multilingual applications in Vue, React, Angular, and at the moment I am using Svelte.
I have always used simple practices, translation with a json dictionary and sending the Lang variable to the server for data acquisition in the requested language (set in the Headers).
All of this was fine until I encountered the need to receive the translated meta tags for the requested content immediately, during SSR, upon landing on the page. But as you know, at this stage there is no access to localStorage or similar, which is why it is impossible for me to acquire the meta tags in the requested language, since I do not have access to the variable set in the browser. How do you act in this case? I'm not interested in finding a specific solution for a certain framework, but a possible technique.
For Svelte I found this half solution, which allows me to obtain the slug / lang / from the address and use it in the server during the rendering phase, in order to obtain the data already translated on the server side.
Can I consider this a good solution?
I don't know what are you returning from the API, but if you have localized user defined content on backend, then this solution is good. If you are translating the app itself, you maybe you can give Tolgee a try, which supports SSR. https://tolgee.io/integrations/svelte
I have a Django Rest Framework application that is fed in data from a csv. I then use React to create dashboards and Widgets from that data. I want to be able to generate a link to share a read-only version of any dashboard, much like in Google docs etc. Anyone clicking on that link will be able to see the dashboard with all the charts and analytics etc. The link can be shared much like how you share a Google Forms link. I'm not sure how to go about doing that. Any help / pointers would be appreciated. Thank you!
I think theoretically you need to use a router on your react app (e.g. https://reactrouter.com/ ).
If you're using create-react-app, you can also refer to https://create-react-app.dev/docs/adding-a-router/#:~:text=Create%20React%20App%20doesn't,is%20the%20most%20popular%20one.) .
With this you can directly read parameters on a certain page within your react app, that you can then use to build a concrete call to the backend, to retrieve the necessary data to build your dashboard.
The 'link builder' functionality most likely needs to be implemented on the backend, so you can have the necessary parameters you need to gather the necessary data, maybe by using query strings.
If you want to make it more complex, you would need to implement on the backend a kind of tokenized access, that could store the full call parameters on the backend side, and associate them with a token of some kind, that you could then provide to your clients.
e.g. : http://djangoappxpto.com/link/12345abcd points to a react page component that then executes a fetch to http://djangoappxpto.com/api/getStats/12345abcd which once received by python would internally mean something like http://djangoappxpto.com/api/generateStatsReport/?param1=a¶m2=b¶m3=w¶m4=aa .
I am evaluating how is it possible to implement Server Side Rendering in SPA app with React and CMS as backend.
This is the approach I see Next.js suggest to have per-rendered and all most all CMS system suggests:
User request a page from react app running on Node server
Node server requests JSON data from CMS through fetch call
Then React App reads this JSON and transform HTML into String like renderToString() and sends the response back to the user.
The disadvantage of this approach is that if JSON data from CMS is huge then first request takes long time.
What alternate solution do you suggest?
Heyooo, Contentful DevRel here. 👋🏻
your concerns are absolutely valid.
And that's why Next.js just recently added advanced static pre-generation using getStaticProps. The goal is to tackle the long dynamic response times by pre-generating as much as possible. This way the user has a fast initial content paint, but can still enjoy all the dynamic benefits that come with a React application (Next.js usually follows an isomorphic JavaScript architecture)
The processing time you describe then is moved from dynamic request/response time into build-processes.
In general, when you're not dealing with millions of pages, I recommend giving static HTML a try. It makes applications often faster, safer, and more secure. For more complext and larger sites, Vercel is also experimenting with hybrid solutions that offer ways to only pre-generate certain pages. That's all very new though. :)
Learning a little React currently. I'm finding myself confused about some of the utility here. One sticking point that seems to (for me, at least) undermine it's value is that If I want to sync my UI to data residing on the server (which can and will change), I need to manually poll the server? Aside from component-based architecture, I'm not sure how this is getting me further than well structured and logically implemented AJAX. Even in the React docs, they're using JQuery in this regard. https://facebook.github.io/react/docs/tutorial.html#updating-state
I'm sure I'm missing the forest for the trees or whatever.
Thanks!
React is (citing their page)
a javascript library for building user interfaces
The main focus is to build a view layer for your application. This means you have full freedom in choosing what to use to fetch your data. For simple uses it can be jQuery or fetch.
It's generally recommended to not fetch data directly in your components and use one of Flux pattern implementations, e.g. Redux.
If your application has to be constantly powered by new data from server you can think about using something like RethinkDB on your backend and connect it to Flux store on your frontend.
I am new to Angular JS, have experience on building spring web applications.
My requirement is to store the some session preferences (Not part of the user Model/entity) into session. I need to use them through out the application.
I couldn't find the right way to do it. I found some options, need suggestion on which one to use it.
ngStorage - can access Local/session storage and store attributes in it.
LocalStorageService - another githubproject, i can use it to store in session storage/ local storage.
Based on the articles i found, localstorage keeps the data even after logout, so have to make sure i clean all of them after logout.
What is the common practice to store session attributes?
I am planning to use ngStorage directive and use sessionstorage and store it by encoding with Base64. Is it a good way to do it?
I am using Java 1.7 and Angular JS for building an application. I have used JHipster to generate the application.
Any Help Appriciated!!!!
welcome! Well, depends the situation, localStorage is an excellent option to store attributes, but yes, it has some limitations and you have to remember to delete this. Another options is to use Cookies of angular project to store attributes on Client Side. I used in some projects and works perfectly for my use case. But if you are using Java, the best way is protect this session attributes using Java HttpServletSessions. I Hope it helps.
i had the same issue and i resolved by find the answer of this question: https://stackoverflow.com/a/922058/5995665
I hope it helps.