serialize data in the server and deserialize data in the client

This commit is contained in:
Evan Almloff 2024-02-02 17:21:58 -06:00
parent 8b489db5ac
commit 1c4e1d84ea
5 changed files with 26 additions and 23 deletions

View file

@ -69,7 +69,6 @@ dioxus-cli-config = { workspace = true, optional = true }
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
dioxus-hot-reload = { workspace = true }
[features]
default = ["hot-reload"]
hot-reload = ["serde_json", "futures-util"]

View file

@ -17,5 +17,5 @@ reqwest = "0.11.18"
[features]
default = []
ssr = ["dioxus/axum"]
server = ["dioxus/axum"]
web = ["dioxus/web"]

View file

@ -11,6 +11,7 @@ use serde::{Deserialize, Serialize};
fn app() -> Element {
let mut count = use_signal(|| 0);
let text = use_signal(|| "...".to_string());
let server_future = use_server_future(get_server_data)?;
rsx! {
h1 { "High-Five counter: {count}" }
@ -30,6 +31,7 @@ fn app() -> Element {
"Run a server function!"
}
"Server said: {text}"
"{server_future.state():?}"
}
}

View file

@ -10,7 +10,7 @@ where
F: Future<Output = T> + 'static,
{
let mut cb = use_callback(_future);
let mut gen = use_hook(|| CopyValue::new(0));
let mut first_run = use_hook(|| CopyValue::new(true));
let resource = use_resource(move || {
async move {
@ -18,11 +18,13 @@ where
// We're doing this regardless so inputs get tracked, even if we drop the future before polling it
let user_fut = cb.call();
// If this is the first run, the data might be cached
if gen() == 0 {
#[cfg(not(feature = "web"))]
// If this is the first run and we are on the web client, the data might be cached
if *first_run.peek() {
// This is no longer the first run
first_run.set(false);
#[cfg(feature = "web")]
if let Some(o) = crate::html_storage::deserialize::take_server_data::<T>() {
gen.set(1);
return o;
}
}
@ -30,28 +32,28 @@ where
// Otherwise just run the future itself
let out = user_fut.await;
// and push the gen forward
gen.set(1);
// If this is the first run and we are on the server, cache the data
#[cfg(feature = "ssr")]
if *first_run.peek() {
let _ = crate::server_context::server_context().push_html_data(&out);
}
#[allow(clippy::let_and_return)]
out
}
});
// On the first run, force this task to be polled right away in case its value is ready
use_hook(|| {
let _ = resource.task().unwrap().poll_now();
let _ = resource.task().poll_now();
});
// Suspend if the value isn't ready
match resource.state() {
match resource.state().cloned() {
UseResourceState::Pending => {
suspend();
None
}
UseResourceState::Regenerating => {
suspend();
Some(resource)
}
UseResourceState::Ready => Some(resource),
_ => Some(resource),
}
}

View file

@ -26,7 +26,7 @@ pub(crate) fn serde_from_bytes<T: DeserializeOwned>(string: &[u8]) -> Option<T>
static SERVER_DATA: once_cell::sync::Lazy<Option<HTMLDataCursor>> =
once_cell::sync::Lazy::new(|| {
#[cfg(target_arch = "wasm32")]
#[cfg(all(feature = "web", target_arch = "wasm32"))]
{
let window = web_sys::window()?.document()?;
let element = match window.get_element_by_id("dioxus-storage-data") {
@ -48,7 +48,7 @@ static SERVER_DATA: once_cell::sync::Lazy<Option<HTMLDataCursor>> =
Some(data.cursor())
}
#[cfg(not(target_arch = "wasm32"))]
#[cfg(not(all(feature = "web", target_arch = "wasm32")))]
{
None
}
@ -63,11 +63,7 @@ pub(crate) fn take_server_data<T: DeserializeOwned>() -> Option<T> {
///
/// When dioxus-fullstack renders the page, it will serialize the root props and put them in the document. This function gets them from the document.
pub fn get_root_props_from_document<T: DeserializeOwned>() -> Option<T> {
#[cfg(not(target_arch = "wasm32"))]
{
None
}
#[cfg(target_arch = "wasm32")]
#[cfg(all(feature = "web", target_arch = "wasm32"))]
{
let attribute = web_sys::window()?
.document()?
@ -76,4 +72,8 @@ pub fn get_root_props_from_document<T: DeserializeOwned>() -> Option<T> {
serde_from_bytes(attribute.as_bytes())
}
#[cfg(not(all(feature = "web", target_arch = "wasm32")))]
{
None
}
}