Comments (16)
brillout
commented on August 21, 2024
1
@phonzammi Yes, that’s exactly the issue
…On Wed 29. Nov 2023 at 18:15, phonzammi ***@***.***> wrote:
Hi @brillout <https://github.com/brillout> ,
About this
<https://github.com/vikejs/vike-react/blob/a4ee8aa81dcc42873da311f6ab5642b3e0df16bd/vike-react/renderer/onRenderHtml.tsx#L38C3-L56C1>
Shouldn't we just stream the page in the page-view tag? not the whole html?
—
Reply to this email directly, view it on GitHub
<#36 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAHVQRRLAZEEQPRMXCI2RCTYG5UTXAVCNFSM6AAAAAA74EGZSWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZSGM3DMNRZGM>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
from vike-react.
phonzammi
commented on August 21, 2024
1
@brillout
Great, I've make a PR,
Please review it, I have a question in the code comment
from vike-react.
brillout
commented on August 21, 2024
Makes sense, I think it's a regression that got introduced by #33.
from vike-react.
brillout
commented on August 21, 2024
@AndrejNemec PR welcome in case that's something you'd be interested in. The change is quite easy. Let us know if you're busy; we'll quickly fix it ourselves then.
from vike-react.
AndrejNemec
commented on August 21, 2024
Thank you for considering me for the PR contribution. I'm currently involved in a project named "vike-painless-react", which brings several key enhancements to the table:
- i18n Support: Integrated with the i18next package for comprehensive internationalization.
- Dark/Light Theme Support: Facilitates an easy switch between dark and light themes, fully compatible with both SSR and client-side environments.
- Enhanced HTML Head Management: Offers improved handling and functionality of the HTML head section.
You can explore the project here: vike-painless-react
For a practical implementation example, check out: vike-painless-react example
While I'm currently focused on developing this package, I see potential synergies with Vike. If integrating these features aligns with your vision, my package could serve as a useful reference or even as a direct addition to Vike. I'm open to discussions about possibly making this an official part of the Vike portfolio. Looking forward to hearing your thoughts! 😄🌟
NPM: https://www.npmjs.com/package/vike-painless-react
from vike-react.
phonzammi
commented on August 21, 2024
Shouldn't we just stream the page in the page-view tag? not the whole html?
from vike-react.
lourot
commented on August 21, 2024
I'm currently involved in a project named "vike-painless-react", which brings several key enhancements to the table:
@AndrejNemec It sounds like some of these enhancement should be made to vike-react (whose goal is also to be painless) and to the equivalent vike-vue and vike-solid packages. PRs welcome
from vike-react.
lourot
commented on August 21, 2024
Fixed in v0.3.5
from vike-react.
brillout
commented on August 21, 2024
I had a look at vike-painless-react: there are a lot of things to like in there 👌. Some of it, if you're interested, can be extracted in re-usable Vike packages e.g. vike-react-i18next, see converstaion we had with Dani at vikejs/vike#1263.
(I grabbed the npm name of relevant Vike packages such as vike-react-i18next; feel free to let me know your npm user name and I'll add you as owner.)
As for your <head> management, I've my own ideas about it. Let's see which one turns out to be better 🦾 😉
In general, composing stacks from re-usable Vike packages and monolithic Vike stacks such as vike-painless-react are both valid approaches. I'm curious to see which one of the two approaches will turn out to be the most useful for users 👀
from vike-react.
AndrejNemec
commented on August 21, 2024
This proposal I've put forward is just an initial idea. My goal is to create a monorepo containing specific packages and then set up an npm organization @vike-painless-react/X to develop several "painless" packages for vikejs.
The packages I've been considering are:
@vike-painless-react/core@vike-painless-react/i18next@vike-painless-react/theming@vike-painless-react/head@vike-painless-react/routing
If you like this vision, we can jointly design it into the vike-react package, potentially replacing the vike-painless-react package. Furthermore, I believe it would be more maintainable to turn vike-react into a monorepo and create an npm organization @vike-react, structuring packages similarly to my proposal for vike-painless-react.
Additionally, I have a question regarding head management. How do you plan to implement it? I have used code from react-helmet-async. Many people are interested in implementing heads as found in next.js, where anywhere in the project, one can set the title, meta, etc., and at the same time, the title,meta,etc.. is fully reactive and SSR-friendly. Setting heads using +config.ts/+Head.tsx... doesn't seem like the most appropriate solution when I need to modify heads according to the state of the application.
from vike-react.
brillout
commented on August 21, 2024
create an npm organization
@vike-react,
That's a great idea. I just created four npm orgs: @vike-{react,vue,solid,svelte}.
If you like this vision, we can jointly design it into the
vike-reactpackage, potentially replacing thevike-painless-reactpackage.
Yes 👍
regarding head management. How do you plan to implement it?
One major issue with title/description defined by components is that it contradicts streaming: when the HTML stream starts then it's too late for setting title/description (because the <head> content is already sent).
That's why I'm relunctant to allow users to let components define <head> values.
I'm thinking +title.js and +description.js is more future-proof.
As much as I'd love to have title/description defined by components, I don't think it's possible because of how browsers work.
from vike-react.
brillout
commented on August 21, 2024
Actually, I'm wrong: a workaround would be to push this after the stream ends:
<script>
document.title = 'someTitleSetByAnyComponent'
</script>As for SEO/social crawlers I'd recommend to disable streaming. This is actually what react-streaming does: https://github.com/brillout/react-streaming#options.
As for DX I'm thinking of that:
import { useTitle } from 'vike-react/useTitle'
// Can be vike-react-query or vike-react-telefunc
import { useData } from 'vike-react-someDataFetchingLibrary'
function Product() {
const data = useData(() => fetch('...'))
const head = useHead()
head.setTitle(data.product.name)
// No effect if streaming (which is fine since streaming is disabled for SEO/social bots)
head.setDescription(data.product.description)
}@AndrejNemec Thoughts?
from vike-react.
AndrejNemec
commented on August 21, 2024
That's a great idea. I would definitely also create components that use the useHead hook, allowing the setting of the title, description, and other useful meta tags like og:X, twitter:X through components like <HeadTitle/>, <HeadMeta/>, <HeadLink/>, etc.
Furthermore, it would be beneficial to implement a robust injection system for packages that will be outside of the vike-react repository. Currently, it's not properly resolved and there are quite a few shortcomings. If I want to register a plugin to vike-react, it's quite a pain.
I propose something like this:
Let's say in the application I want to register the module: @vike-react/head
In the application, a config would be created: +modules.ts
export default {
'vike-react-head': {
server: 'import:@vike-react/head/module/server...',
client: 'import:@vike-react/head/module/client...'
},
'vike-react-query': { /* ... */ },
// ...etc
}from vike-react.
brillout
commented on August 21, 2024
I'm not sure I understand your issue: what's wrong with https://vike.dev/extends?
from vike-react.
AndrejNemec
commented on August 21, 2024
The problem with "https://vike.dev/extends" is that some important values for the injection of multiple packages requiring the same methods are getting overwritten. This requires modifying the vike-react package every time to add new configuration attributes for each additional module I want to integrate into vike-react. For instance, I can't modify onRenderHtml without overwriting the original onRenderHtml, etc. This could be useful for developers who want to create more advanced packages for vike-react.
from vike-react.
brillout
commented on August 21, 2024
The plan so far is this: vikejs/vike#1283. Which is actually needed for seamlessly integrating vike-react-query with vike-react. But, if you think it isn't enough, then elaborate on any concrete issue you're having.
from vike-react.
Related Issues (20)
- SSR issue with Mui HOT 4
- vike-react-query withFallback error prop does not include error properties HOT 3
- `clientOnly()` instead of `<ClientOnly>` HOT 1
- Need a way to add html attributes to the root `<html>` element HOT 7
- routeParams did not pass on the client-side by default HOT 4
- Feedback on upgrading from vite-plugin-ssr to vike-react HOT 5
- Disable HTML streaming HOT 2
- StrictMode Config HOT 4
- Ability to run code before hydration HOT 3
- Vike error on HOT 2
- useData() - Error with new vike project HOT 7
- v1 Migration error with useData HOT 1
- Improvements around page transition animations HOT 5
- Make `Layout` cumulative HOT 2
- vike-react-query throws error in `onRenderHtml` HOT 4
- Vike react bug HOT 4
- vike-react-telefunc HOT 2
- Title is being set to an empty string on client-side navigation with SSR HOT 1
- `vike-react-query` + Telefunc + Authentication
- Publish `vike-react-query` as `v1.0.0`? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vike-react.